<template>
    <div class="courseList">
        <top-bar :bgImgUrl="bgImgUrl">
            <div class="next" @click="next">
                <span class="iconfont icon-fanhui1" style="font-size: 1.4em; color: #ffffff"></span>
            </div>
        </top-bar>
        <div class="container">
            <div class="index-bg">
                <div class="list-item" v-for="(item, index) in courseList" :key="index" @click="toCourseDetail(item.id)">
                    <div class="list-item-img">
                        <img :src="item.img">
                    </div>
                    <div class="list-item-text">
                        <div class="desc">
                            <span class="current" :style="{color: item.current === 2 ? styleColor.c : '', borderColor: item.current === 2 ? styleColor.c : ''}">{{ item.currentName }}</span>
<!--                            <div class="bar" :style="{backgroundColor: item.current === 2 ? styleColor.bc: ''}"></div>-->
                            <span class="text">{{ item.name }}</span>
                        </div>
                        <div class="lecturer">
                            <div class="portrait">
                                <img :src="item.authorImg" alt="">
                            </div>
                            <span class="name">{{ item.author }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /*
    * 课程列表
    * */
    import topBar from "@/components/topBar/topBar";
    export default {
        name: "courseList",
        data() {
            return {
                bgImgUrl: require('../../../assets/images/xnjd-bg2.jpg'),
                courseList: [
                    {
                        id: 1,
                        current: 0,  // 0代表在修 1代表未修 2代表重修
                        currentName: '在修',
                        name: '马克思主义基本原理',
                        img: require('../../../assets/images/src=http___www.hailangjituan.com_upload_image_201908_20190806145483948394.jpg&refer=http___www.hailangjituan.jpg'),
                        author: '龙丹斌',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    },
                    {
                        id: 2,
                        current: 2,
                        currentName: '重修',
                        name: '计算机与科学',
                        img: require('../../../assets/images/jisuanji.jpg'),
                        author: '陈想',
                        authorImg: require('../../../assets/images/yishneg.jpg')
                    }
                ],
                styleColor: {
                    c: '#fa7228',
                    bc: '#fb8f53'
                }
            }
        },
        methods: {
            toCourseDetail(courseId) {
                this.$router.push({
                    name: 'courseDetail',
                    params: { courseId: courseId }
                })
            },
            next() {
                this.$router.back()
            },
        },
        mounted() {
        },
        components: {
            topBar
        }
    }
</script>

<style lang="scss" scoped>
    .courseList {
        /*height: 100%;*/
        /*overflow: auto;*/
        background-color: white;
        .next {
            color: #343e4c;
            text-align: left;
            height: 36px;
            line-height: 36px;
            padding: 20px;
            .icon {
                width: 1.4em;
                height: 1.4em;
            }
        }
        .container {
            margin-top: -40px;
            padding: 0 10px;

            .index-bg {
                background-color: white;
                /*height: 300px;*/
                border-radius: 8px 8px 0 0;
                padding: 20px 20px;

                .list-item {
                    /*display: flex;*/
                    overflow: hidden;
                    margin-bottom: 46px;

                    .list-item-img {
                        float: left;
                        border-radius: 4px;
                        overflow: hidden;
                        width: 32%;
                        height: 64px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .list-item-text {
                        float: right;
                        text-align: left;
                        font-size: 16px;
                        /*flex: 4;*/
                        width: 68%;
                        padding-left: 10px;
                        box-sizing: border-box;

                        .desc {
                            margin-bottom: 12px;

                            .current {
                                text-align: center;
                                position: relative;
                                font-size: 12px;
                                height: 16px;
                                width: 38px;
                                color: #0f57d5;
                                border: 1px solid #3f79de;
                                border-radius: 4px;
                                display: inline-block;
                                margin-right: 6px;
                                line-height: 16px;
                                padding-top: 2px;
                            }

                            .bar {
                                display: inline-block;
                                width: 1px;
                                height: 10px;
                                background-color: #3f79de;
                                margin-right: 6px;
                            }

                            .text {
                                display: inline-block;
                                font-weight: 700;
                                vertical-align: middle;
                            }
                        }

                        .lecturer {
                            text-align: left;

                            .portrait {
                                width: 26px;
                                height: 26px;
                                display: inline-block;
                                margin-right: 6px;
                                vertical-align: middle;
                                border-radius: 50%;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .name {
                                font-size: 14px;
                                display: inline-block;
                                line-height: 26px;
                                vertical-align: middle;
                                color: #5c697b;
                            }
                        }
                    }
                }
            }
        }
    }
</style>